<template>
  <div>
    <CategorySelector :isDisable="showStatus!==ShowStatus.SPU_LIST"/>
    <el-card style="margin-top:10px;">
      <SpuList @setShowStatus="changeShowStatus" @getSpuInfo="saveSpuInfo" @getSkuInfo="saveSkuInfo" v-if="showStatus===ShowStatus.SPU_LIST"></SpuList>
      <SpuForm @setShowStatus="changeShowStatus" :currentSpuInfo = "currentSpuInfo" v-if="showStatus===ShowStatus.ADD_SPU"></SpuForm>
      <SkuForm @setShowStatus="changeShowStatus" :spuInfo="currentSpuInfo" v-if="showStatus===ShowStatus.ADD_SKU"></SkuForm>
    </el-card>
  </div>
</template>

<script lang="ts">
// import SpuList from './components/SpuList.vue'
// import SpuForm from './components/SpuForm.vue'
export default {
  name: "Spu",
  // components:{SpuList,SpuForm}
};
</script>
<script setup lang="ts">
import { ref } from "vue";
// 如果将子组件在这个语法糖的里面来引入的话，则直接引入后使用即可，不需要注册
import SpuList from "./components/SpuList.vue";
import SpuForm from "./components/SpuForm.vue";
import SkuForm from "./components/SkuForm.vue";
import { ShowStatus } from "./types";

// 定义一个变量 来判断到底要显示哪个组件
const showStatus = ref(ShowStatus.SPU_LIST);

// 定义一个变量来存储数据
const currentSpuInfo = ref({});

// 1. 更改要显示的组件名称
const changeShowStatus = (status: ShowStatus) => {
  showStatus.value = status;
};

// 2. 接收子组件传递过来的数据
const saveSpuInfo = (spuInfo) => {
  // currentSpuInfo.value = spuInfo
  currentSpuInfo.value = {
    ...spuInfo,
    // 为了避免报错 要在此处添加两个属性
    spuImageList: [],
    spuSaleAttrList: [],
  };
};
</script>

<style>
</style>